<script setup name="modeling">
import { ref, onMounted, watchEffect } from 'vue'
import rightArea from './rightArea.vue' //右边列表
import addForm from './addForm.vue' //新建仓库弹窗
import { ElMessage, ElMessageBox } from 'element-plus' //删除消息弹出框
const { proxy } = getCurrentInstance()
// 封装 方法 字典查询
const {
  order_supplier_level, // 供应商等级
  order_affiliated_organization //供应商所属机构
} = proxy.useDict('order_supplier_level', 'order_affiliated_organization')

const formRef = ref(null)

// 保存单挑数据 用作回显
const ruleForm = ref({})

// 新增弹窗状态
const addIsShow = ref(false)

// 标题
const title = ref('新增')

// 保存加载状态
const Btnloading = ref(false)

// 表格加载状态
const loading = ref(false)

// 表格数据
const TableData = ref([])

// 列表总数量
const total = ref(0)

// 是否多选
const DelDisabled = ref(false)

// 是否禁用 单选
const ExamineDisabled = ref(false)

// 树形结构数据
const treeData = ref([])

// 右边列表数据
const rightData = ref({})

// 点击左边树结构保存数据
const leftTreeData = ref({})

//获取新增弹窗组件实例
const newRef = ref(null)
// 新增仓库 弹窗
const addDia = () => {
  leftTreeData.value = {}
  title.value = '新增仓库'
  addIsShow.value = true
}
// 新增子区域 弹窗
const addregion = () => {
  title.value = '新增子区域'
  addIsShow.value = true
}
// 修改 弹窗
const editDia = async () => {
  title.value = '修改'
  const res = await GetDetailAPI(leftTreeData.value.id)
  ruleForm.value = res.data
  addIsShow.value = true
}
// 弹窗取消
const close = () => {
  addIsShow.value = false
}
// 树形仓库列表接口
const getList = async () => {
  const res = await GetListAPI()
  treeData.value = res.data
}
// getList()

// 通过id查找树形结构数据  nodeClick是树形结构的点击事件
const nodeClick = async val => {
  // console.log(val)
  leftTreeData.value = val
  // 1 为第一层 2 为第二层 通过warehouseType判断 是否是最外层 如果为第三层 禁用新增 子区域
  val.warehouseType == '1' || val.warehouseType == '2'
    ? (ExamineDisabled.value = false)
    : (ExamineDisabled.value = true)

  // 通过id判断 是否有选择数据 进行修改和删除的禁用
  val?.id ? (DelDisabled.value = false) : (DelDisabled.value = true)
  // 保证兼容性 判断有没有id
  if (!val?.id) return
  // 点击树形结构查看数据
  const res = await GetDetailAPI(val.id)
  rightData.value = res.data
}

nodeClick({})

//判断是否为新增仓库 新增子区域
const isName = () => {
  if (title.value == '新增仓库') addSub()
  if (title.value == '新增子区域') addSub1()
}

// 新增仓库
const addSub = async () => {
  const res = await newRef.value.submit()
  // console.log(res)
  try {
    Btnloading.value = true
    await AddDataAPI(res)
    proxy.successMsg('新增成功')
    getList()
    close()
  } catch {
  } finally {
    Btnloading.value = false
  }
}

// 新增子区域
const addSub1 = async () => {
  const res = await newRef.value.submit()
  try {
    Btnloading.value = true
    await AddSubareaAPI(res)
    proxy.successMsg('新增成功')
    getList()
    close()
  } catch {
  } finally {
    Btnloading.value = false
  }
}

// 删除
const del = async () => {
  const isif = await proxy.DelMessageBox()
  if (!isif) return
  await DelDataAPI(leftTreeData.value.id)
  getList()
}

// 修改
const editSub = async () => {
  const res = await newRef.value.submit()
  try {
    Btnloading.value = true
    await EditDataAPI(res)
    proxy.successMsg('修改成功')
    getList()
    close()
  } catch {
  } finally {
    Btnloading.value = false
  }
}

// 查询条件
const SelectList = ref([{ type: '日期范围' }])

// 查询条件 分页
const query = reactive({
  pageNum: 1,
  pageSize: 10
})
</script>
<template>
  <div class="app-container">
    <div class="app">
      <!-- 查询条件组件 -->
      <SelectForm :SelectForm="SelectList" @selectSubmit="selectSubmit" />
    </div>
    <el-card class="box-card">
      <div class="btnmp">
        <el-button type="primary" v-hasPermi="['spareadmin:admin:sparemode:add']" @click="addDia">新增仓库</el-button>
        <el-button
          type="primary"
          v-hasPermi="['spareadmin:admin:sparemode:add']"
          :disabled="ExamineDisabled"
          @click="addregion"
          >新增子区域</el-button
        >
        <el-button
          type="primary"
          v-hasPermi="['spareadmin:admin:sparemode:edit']"
          :disabled="DelDisabled"
          @click="editDia"
          >修改</el-button
        >
        <el-button
          type="primary"
          v-hasPermi="['spareadmin:admin:sparemode:remove']"
          :disabled="DelDisabled"
          @click="del"
          >删除</el-button
        >
        <div class="flex">
          <el-card class="card-tree">
            <el-tree
              ref="treeRef"
              :data="treeData"
              default-expand-all
              node-key="id"
              :props="{
                value: 'id',
                children: 'children',
                label: 'warehouseName'
              }"
              @node-click="nodeClick"
            />
          </el-card>
          <rightArea ref="rightarea" :data="rightData" />
        </div>
      </div>
    </el-card>
    <!-- 新增弹窗 -->
    <p-XiaoheDialog :dialogVisible="addIsShow" :title="title" @close="close" width="50%">
      <template #body>
        <addForm :data="ruleForm" :leftTreeData="leftTreeData" :isShow="title == '新增子区域'" ref="newRef" />

        <Btn :loading="Btnloading" @close="close" @submit="title == '修改' ? editSub() : isName()" />
      </template>
    </p-XiaoheDialog>
  </div>
</template>

<style scoped>
.title {
  color: #3985fb;
}
label {
  display: inline-block;
  width: 120px;
  text-align: right;
  padding-right: 12px;
}

.flex-items-center {
  margin-bottom: 12px;
}
.btnmp {
  margin-bottom: 20px;
}
.card-tree {
  width: auto;
  min-width: 220px;
  max-width: 420px;
  margin-right: 15px;
  margin-top: 15px;
}
</style>
